<template>
  <div class="allgoods-wrap">
    <van-nav-bar :title="title" left-text="返回" @click-left="navBack" fixed left-arrow style="z-index: 2;" />
    <div style="height: 46px;"></div>
    <van-tabs v-model="active" @change="switchTab">
      <van-tab title="上架中商品">
        <div v-if="goods">
          <div class="goods-wrap" v-for="(item,index) in goods.data.data"  :key="index">
          <div class="goods-header clearfix">
            <div class='l'> <van-tag v-if="item.relation_id" type="primary">官方商城</van-tag> 商品ID: {{ item.id }}</div>
            <div class='r'>发布时间: {{ item.updated_at }} </div>
          </div>
          <div class="goods-container">
          <van-row>
            <van-col offset-left="2" span="5"><van-image width="70" height="70"  :src="item.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'" /></van-col>
            <van-col span="19">
              <div>
                <p class="goods-title">{{ item.title }}</p>
                <div class="goods-sepc clearfix">
                  <div class='l'>
                    <span>库存 {{ item.inventory }}</span>
                  </div>
                  <div class='r money'>
                    ¥ {{ item.price }}
                  </div>
                </div>
              </div>
            </van-col>
          </van-row>
          <!-- <p style="margin: .25rem 0 0;">商家货号: as2d1a2sdXsa4d54</p> -->
          </div>
          <div class="goods-footer clearfix">
            <div class="l">
              <i class="iconfont"></i>
              <van-icon name="qr" />
            </div>
            <div class="r">
              <van-button round size="mini" @click="under(item)" type="danger">下架</van-button>
              <van-button round size="mini" type="primary" @click="getGoods('edit',item,item.relation_id)">编辑</van-button>
              <van-button round size="mini" type="danger" @click="deleteGoods(item.id)">删除</van-button>
            </div>
          </div>
        </div>
        </div>
      </van-tab>
      <van-tab title="下架商品">
        <div v-if="ClosedGoods">
          <div class="goods-wrap" v-for="(item,index) in ClosedGoods.data.data" :key="index">
          <div class="goods-header clearfix">
            <div class='l'><van-tag v-if="item.relation_id" type="primary">官方商城</van-tag>商品ID: {{ item.id }}</div>
            <div class='r'>发布时间: {{ item.updated_at }}</div>
          </div>
          <div class="goods-container">
          <van-row>
            <van-col offset-left="2" span="5"><van-image width="70" height="70"  :src="item.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'" /></van-col>
            <van-col span="19">
              <div>
                <p class="goods-title">{{ item.title }}</p>
                <div class="goods-sepc clearfix">
                  <div class='l'>
                    <span>库存 {{ item.inventory }}</span>
                  </div>
                  <div class='r money'>
                    ¥ {{ item.price }}
                  </div>
                </div>
              </div>
            </van-col>
          </van-row>
          <!-- <p style="margin: .25rem 0 0;">商家货号: as2d1a2sdXsa4d54</p> -->
          </div>
          <div class="goods-footer clearfix">
            <div class="l">
              <i class="iconfont"></i>
              <van-icon name="qr" />
            </div>
            <div class="r">
              <van-button round size="mini" type="info" @click="under(item)">上架</van-button>
              <van-button round size="mini" type="primary" @click="getGoods('edit',item,item.relation_id)">编辑</van-button>
              <van-button round size="mini" type="danger">删除</van-button>
            </div>
          </div>
        </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-pagination 
      v-model="currentPage" 
      :page-count="maxPage"
      mode="simple"
      @change="getListData"
    />
    <div class="fixed footer-tool">
      <van-button v-if="storeInfo.vip == 1" type="primary" block @click="mall" style="border-radius: 0">同步官方商城商品</van-button>
      <van-button type="info" block @click="getGoods('add')" style="border-radius: 0">添加商品</van-button>
    </div>
    <van-popup v-model="mallShow" position="bottom" :style="{height: '100%'}">
      <mallGoods v-if="mallGoodsType" :category_id="category_id" :category="c_category"  @open="mallShow = !mallShow;mallGoodsType = false;getListData()" />
    </van-popup>
    <van-popup v-model="categoryShow" position="bottom" :style="{height: '100%',paddingTop: '50px'}">
      <van-nav-bar
        class="fixed header"
        title="选择分类"
        @click-left="categoryShow = false"
      >
      <van-icon name="cross" size="1.5rem" slot="left" />
      </van-nav-bar>
        <van-cell-group>
          <van-cell v-for="item in categoryData" :key="item.id" :title="item.title" is-link @click="getmallList(item)" />
        </van-cell-group>
    </van-popup>
  </div>
</template>
<script>
import {
  Notify,
  Dialog
} from 'vant';
import  mallGoods  from '@/common/goods/mallGoods';
export default {
  name: "AllGoods",
  data() {
    return {
      active: 0,
      id: null,
      title: null,
      goods: null,
      checked: false,
      currentPage:1,
      maxPage: null,
      ClosedGoods: null,
      storeInfo: null,
      mallShow: false,
      category_id: null,
      categoryShow: false,
      categoryData: null,
      c_category: null,
      mallGoodsType: false
    }
  },
  created(){
    this.title = this.global.state.store_path_event.title;
    this.id=  this.global.state.store_path_event.id;
    this.category_id = this.global.state.store_path_event.id;
    this.getListData();
    this.getCategoryData();
    this.storeInfo = this.global.state.storeInfo;
  },
  mounted(){
    
  },
  components:{
    mallGoods
  },
  methods: {
    navBack(){
      this.$router.go(-1);
    },
    async getCategoryData(){
      let params = {
        token: sessionStorage.getItem('token')
      }
      const res = await this.axios.get('api/store/index/sync_menu',{params});
      this.categoryData = res.data.data;
      console.log(this.categoryData);
      
    },
    getGoods(e,item,type){
      if(e == 'add'){
        this.$router.push({name:'storeMineAddGoods',path:'./addgoods',params:{'type':'add','id':this.id}});
      }else if(type){
        this.$router.push({name:'storeMineAddGoods',path:'./addgoods',params:{'type':'edit','id':this.id,'item':item,'official':true}})
      }else {
        this.$router.push({name:'storeMineAddGoods',path:'./addgoods',params:{'type':'edit','id':this.id,'item':item}});
      }
    },
    deleteGoods(e){
      Dialog.confirm({
        title: '提示',
        message: '您确定要删除吗?'
      }).then(() => {
        this.axios.get('/api/store/manager/good/delete/'+e+'?token='+this.global.state.accessToken || sessionStorage.getItem("token")).then(res=>{
        if(res.data == 200){
          this.getListData();
          Notify({ type: 'primary',background:'#07c160', message: res.data.message });
        }else {
          Notify({ type: 'error', message: res.data.message });
          this.getListData();
        }
      })
      .catch(err=>console.log(err))
        // on confirm
      }).catch(() => {
        // on cancel
      });
      
    },
    getListData(){
      let token = sessionStorage.getItem("token");
      let params = {
        page: this.currentPage,
        token: token
      }
      this.axios.get('/api/store/manager/good/list/'+ this.id+ '/Normal',{params})
      .then(res=>{
        this.goods = [];
        this.goods = res.data;
        this.maxPage = res.data.data.last_page;
      })
      .catch(error=>{
        console.log(error)
      })
      this.axios.get('/api/store/manager/good/list/'+ this.id+ '/Unshelve',{params})
      .then(res=>{
        this.ClosedGoods =res.data;
        this.maxPage = res.data.data.last_page;
      })
      .catch(error=>{
        console.log(error)
      })
    },
    switchTab(){
      this.currentPage = 1;
      let token = sessionStorage.getItem("token");
      let params = {
        page: this.currentPage,
        token: token
      }
      if(this.active == 0){
        this.axios.get('/api/store/manager/good/list/'+ this.id+ '/Normal',{params})
        .then(res=>{
          this.goods =res.data;
          this.maxPage = res.data.data.last_page;
        })
        .catch(error=>{
          console.log(error)
        })
      }else {
        this.axios.get('/api/store/manager/good/list/'+this.id+'/Unshelve',{params})
        .then(res=>{
          this.ClosedGoods =res.data;
          this.maxPage = res.data.data.last_page;
        })
        .catch(error=>{
          console.log(error)
        })
      }
    },
    mall(){
      this.categoryShow = true
    },
    closeMallGoods(){  
      this.mallShow = false;
    },
    getmallList(item){
      this.c_category = item;
      this.mallGoodsType = true;
      this.mallShow = true
    },
    under(e){
      e.status == 'Normal' ? e.status = 'Unshelve' :  e.status = 'Normal';
      let params = {
        status: e.status,
        token: sessionStorage.getItem('token')
      };
      this.axios.get('/api/store/manager/good/status/'+e.id,{params})
        .then(res=>{
          if(res.data.code == 200){
            Notify({ type: 'success',background: '#07c160', message: res.data.message });
            this.getListData();
          }
        })
        .catch(err=>{
           Notify({ type: 'success', message: '修改失败' });})

    }
  }
};
</script>
<style scoped>
.allgoods-wrap {
  padding-bottom: 100px;
}
.goods-wrap {
  box-sizing: border-box;
  background-color: white;
  margin: .25rem 0 .75rem;
  
}
.goods-wrap .goods-header {
  padding: 5px 12px;
}
.goods-wrap .goods-container {
  padding: 10px 15px;
  background-color: #F9F9F9;
}
.goods-title {
  padding: .25rem 5px;
  margin: 0;
  width: 100%;
}
.goods-footer {
  box-sizing: border-box;
  padding: 5px 12px;
  background-color: white;
}
.goods-sepc {
  padding: 0 12px;
}
.goods-sepc .money {
  color: #e93b3d;
  font-size: 18px;
  text-align: right;
}
.footer-tool {
  display: flex;
  flex-wrap: nowrap;
  bottom: 0;
  left: 0;
  right: 0;
}
.header {
    top: 0;
    left: 0;
    right: 0;
    z-index: 10
}
</style>
